<template>
	<view>
		<view class="kaoshi-head">
			<!-- 头部 年纪切换 搜索 通知 -->
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="jump">
					<view class="kaoshi-head-kemu">{{ subject3.subject_name }}</view>
					<view class="iconfont icon-weibiaoti"></view>
				</view>
				<view class="kaoshi-head-right">
					<!-- <text class="iconfont icon-sousuo" @tap="gotoSearch"></text>
					<text class="iconfont icon-lingdang" @tap="$openrul('/pages/article/notice')" style="margin-left: 12px;"></text> -->
				</view>
			</view>
			<!-- 头部 年纪切换 搜索 通知 -->
			

		</view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">考试</view>
			</view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head-nav">
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/examination/examinationList/index?from_type=2')">
					<image :src="static_media.img01" class="kaoshi-head-nav-img"></image>
					<view>模拟考试</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/examination/examinationList/index?from_type=1')">
					<image :src="static_media.img02" class="kaoshi-head-nav-img"></image>
					<view>正式考试</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/my/examWrongQuestion/index')">
					<image :src="static_media.img03" class="kaoshi-head-nav-img"></image>
					<view>考试错题</view>
				</view>
			</view>
			<view class="kaoshi-head-nav-flex">
				<view @tap="navTo('/pages/my/recording/index')">
					<image :src="static_media.img04" class="kaoshi-head-nav-img"></image>
					<view>考试记录</view>
				</view>
			</view>
		</view>

		<view class="kaoshi-tiku-title" v-if="mockList.length > 0">
			<view class="kaoshi-tiku-title-l">模拟考试</view>
			<navigator open-type="navigate" url="/pages/examination/examinationList/index?from_type=2" hover-class="none"
				class="kaoshi-tiku-title-r">
				查看全部
			</navigator>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in mockList" :key="index">
				<view class="kaoshi-tiku-content" :class="item.is_unlock == 0 ? 'lockbg' : ''" @tap="choice_exam(item)">
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-top">
							<view>{{ item.exam_name }}
								<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
									<image src="../../static/img/vip.png" mode=""></image>
									<view>VIP</view>
								</view>
							</view>
						</view>
					</view>
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view class="iconfont icon-shijian1"></view>
							<view class="pub-gray">{{ item.start_date }} - {{ item.end_date }}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="kaoshi-tiku-title" v-if="examList.length > 0">
			<view class="kaoshi-tiku-title-l">正式考试</view>
			<navigator open-type="navigate" url="/pages/examination/examinationList/index?from_type=1" hover-class="none"
				class="kaoshi-tiku-title-r">
				查看全部
			</navigator>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in examList" :key="index">
				<view class="kaoshi-tiku-content" @tap="choice_exam(item)">
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-top">
							<view>{{ item.exam_name }}
								<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
									<image src="../../static/img/vip.png" mode=""></image>
									<view>VIP</view>
								</view>
							</view>
						</view>
					</view>
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view class="iconfont icon-shijian1"></view>
							<view class="pub-gray">{{ item.start_date }} - {{ item.end_date }}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="tan" v-if="showModal">
			<view class="tan-mask" @tap="isShowModal"></view>
			<view class="tan-modal">
				<view class="tan-title">
					<view>{{ current_exam.exam_name }}</view>
				</view>
				<view class="tan-content">
					<view class="exam-tan-content">
						<view class="exam-tan-content-flex">
							<span>题数</span>
							<view>{{ current_exam.num }}题</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>总分</span>
							<view>{{ current_exam.score }}分</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>参考时间</span>
							<view>{{ current_exam.givetime }}分钟</view>
						</view>
						<view class="exam-tan-content-flex">
							<span>模式</span>
							<view>{{ current_exam.type_text }}</view>
						</view>
					</view>
					<view class="exam-tan-button" @tap="examBegin(current_exam)">开始答题
					</view>
				</view>
			</view>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
import {
	mapState
} from 'vuex';
import Error from '@/core/untils/error/index';
import authVip from '@/components/authVip.vue'
export default {
	data() {
		return {
			mockList: [],
			examList: [],
			showModal: false,
			current_exam: [],
			showAuthVip: false,
		};
	},
	async onShow() {
		console.log('%c [ this.$store.state ]-145', 'font-size:13px; background:pink; color:#bf2c9f;', this.$store.state)

		if (this.userinfo.token) {
			this.get_mock_list();
			this.get_exam_list();
			await this.$myUserLogin.getSubvip(this.subject3.id)
		}
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		// #endif
	},
	computed: {
		...mapState(['subject3', 'userinfo', 'subjectVip']),
		static_media() {
			return {
				img01: this.$myConfig.localMedia + '/static/img/kaoshi-icon1.png',
				img02: this.$myConfig.localMedia + '/static/img/kaoshi-icon2.png',
				img03: this.$myConfig.localMedia + '/static/img/kaoshi-icon3.png',
				img04: this.$myConfig.localMedia + '/static/img/kaoshi-icon4.png'
			};
		},
	},
	components: {
		authVip
	},
	methods: {
		jump() {
			console.log('dianile')
			// this.$openrul('/pages/auth/choiceSubject/index')
			uni.navigateTo({
				url: '/pages/auth/choiceSubject/indexthree'
			})
		},
		isShowModal: function () {
			this.showModal = !this.showModal
		},
		//跳转前需要登录
		navTo(url) {
			if (this.$myUserLogin.getToken()) {
				this.$openrul(url)
			} else {
				Error.errorNotLoggedIn();
			}
		},
		//点击考试项目，弹窗显示相关信息
		choice_exam(item) {
			if (item.is_unlock == 0) {
				return
			}
			if (!this.subjectVip && item.is_vip) {
				this.showAuthVip = true
				return
			}
			if (item.is_allow == 1) {
				this.current_exam = item
				this.$nextTick(() => {
					this.isShowModal()
				})
			} else if (item.is_allow == 0) {
				uni.showToast({
					icon: 'none',
					title: '您已参加过本场考试，不能重复考试'
				})
				return;
			}
		},
		async get_mock_list() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.mockExaminationList,
				data: {
					subject_id: this.subject3.id,
					page: 1,
					limit: 4
				},
				needLogin: true
			});
			if (res.code === 1) {
				this.mockList = res.data.data
			}
		},
		async get_exam_list() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.examinationList,
				data: {
					subject_id: this.subject3.id,
					page: 1,
					limit: 4
				},
				needLogin: true
			});
			if (res.code === 1) {
				this.examList = res.data.data
			}
		},
		// 考试开始，向后台发送开始考试的考试id，返回当前考试结束时间
		async examBegin(item) {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.exam_begin,
				data: {
					exam_id: item.id
				},
				needLogin: true
			});
			if (res.code == 1) {
				let end_time = res.data.endtime
				this.goto_detail(item, end_time)
			}
		},
		goto_detail(item, end_time) {
			this.showModal = !this.showModal
			this.$openrul('/pages/examination/examinationList/detail?id=' + item.id + '&from_type=' + item.type +
				'&exam_name=' + item.exam_name + '&title=' + item.type_text + '&end_time=' + end_time)
		},
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}


/* 首页头部 */
.kaoshi-head {
	background: #3a79f7;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	top: 0;
	border-bottom: none;
}

.kaoshi-head-top {
	color: #fff;
	line-height: 58px;
}

.kaoshi-head-top .kaoshi-head-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.kaoshi-head-top .kaoshi-head-left .icon-weibiaoti {
	padding-left: 4px;
	font-size: 18px;
}

.kaoshi-head-top .kaoshi-head-kemu {
	font-size: 16px;
	text-align: center;
}

.kaoshi-head-top .kaoshi-head-right {
	width: 18%;
	text-align: right;
}

.kaoshi-head-top .kaoshi-head-right .icon-datiqia {
	font-size: 22px;
}


.kaoshi-head-nav {
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	color: #605d70;
	padding: 16px 0;
	z-index: 10000;
	background: #fff;
	width: 93%;
	margin: 11px auto;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.kaoshi-head-nav .kaoshi-head-nav-flex {
	flex: 1;
}

.kaoshi-head-nav-img {
	width: 38px;
	height: 38px;
}

.kaoshi-tiku-title {
	width: 92%;
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.kaoshi-tiku-title-l {
	display: flex;
	font-weight: bold;
	font-size: 17px;
}

.kaoshi-tiku-title-r {
	color: #000;
	border: solid 1px #d8d8d8;
	padding: 5px 13px;
	border-radius: 35px;
	font-size: 12px;
}

.kaoshi-tiku {
	background: #fff;
	width: 93%;
	margin: 0 auto 8px;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.kaoshi-tiku-content {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	font-size: 14px;
	padding: 20px 20px;
	border-bottom: solid 1px #f5f5f5;
}

.kaoshi-tiku-content .icon-arrow {
	padding-left: 13px;
	color: #b3b3b3;
}

.kaoshi-tiku-content-flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: inherit;
}

.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
	padding-bottom: 6px;
}

.kaoshi-tiku-content .kaoshi-tiku-content:last-child {
	font-size: 14px;
}

.kaoshi-tiku .kaoshi-tiku-content:last-child {
	border-bottom: none;
}

.icon-shijian1 {
	color: #3c7bfc;
	font-size: 18px;
	padding-right: 2px;
}

.kaoshi-tiku-content-top {
	display: flex;
	align-items: center;
	flex: 1;
	font-size: 16px;
}

.kaoshi-tiku-content-top img {
	width: 20px;
	height: 22px;
	margin-right: 10px;
}

.kaoshi-tiku-content-bottom {
	font-size: 13px;
	display: flex;
	align-items: center;
}

/*弹窗*/
.tan-mask {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
}

.tan-modal {
	position: fixed;
	z-index: 999;
	width: 80%;
	max-width: 300px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #fff;
	text-align: center;
	border-radius: 3px;
	overflow: hidden;
}

.tan-title {
	padding: 15px 0;
	border-bottom: solid 1px #f4f4f4;
}

.tan-title view {
	font-weight: 400;
	font-size: 17px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tan-content {
	width: 90%;
	margin: 0 auto;
	font-size: 14px;
}

.exam-tan-content-flex {
	display: flex;
	width: 91%;
	margin: 0 auto;
	padding: 13px 0;
	border-bottom: solid 1px #f4f4f4;
}

.exam-tan-content-flex span {
	color: #767676;
	width: 42%;
	text-align: left;
}

.exam-tan-button {
	background: #3c7bfc;
	color: #fff;
	padding: 10px;
	margin: 15px 0;
	border-radius: 4px;
	font-size: 16px;
	display: block !important;
}


.lockbg {
	background: #717171;
	position: relative;
}

.lockbg::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	background-image: url('/static/img/vip.png');
	background-size: cover;
}
</style>
